<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-08-11 11:14:59
 * @LastEditTime : 2023-12-27 11:23:08
-->
<script lang="ts" setup name="Notification">
import useNotificationStore from '@g/store/modules/notification'
import { msgApi } from '@main/apis/msg'
import useUserStore from '@/global/store/modules/user'
import { systemConfig } from '@/system.config'
import router from '@/global/router'

const emit = defineEmits(['close'])
const notifucationStore = useNotificationStore()
const activeName = ref('message')

let CustomMsgComponent: any = null
try {
  const moudle: any = import.meta.glob('../../../../../MicroApp/**/*.vue')

  if (systemConfig?.newsComponentPath)
    CustomMsgComponent = defineAsyncComponent(moudle[`../../../../../MicroApp/${systemConfig.newsComponentPath}`])
}
catch (error) {
}

const userStore = useUserStore()
const unReadList: Ref<{ id: string; [key: string]: any; }[]> = ref([])
// 获取未读消息列表
const getMessageUnread = () => {
  msgApi.getManagementList({
    readStatus: 'NO_READ',
    businessKey: '',
    receiverId: userStore.userInfo.id,
    page: 1,
    rows: 9999
  }).then(res => {
    const { success, data } = res
    if (!success)
      return
    unReadList.value = data
    notifucationStore.setCount(data.length)
  })
}
if (!systemConfig.newsComponentPath)
  getMessageUnread()

const handLinkTo = () => {
  router.push({
    path: systemConfig?.newLinkPath || '/news-center/personal-news'
  })
  emit('close')
}

// 未读消息数相加
const setTodoCount = (count: number) => {
  notifucationStore.setCount(undefined, count)
}

const handMsgTo = (item: any) => {
  // console.log('item: ', item)
}
</script>

<template>
  <el-tabs
    v-if="!CustomMsgComponent"
    ref="refTab"
    v-model="activeName"
    class="notification overflow-overlay"
  >
    <el-tab-pane
      :label="`消息 ${
        notifucationStore.message > 0 ? `(${notifucationStore.message})` : ''
      }`"
      name="message"
      class="container"
    >
      <div class="list">
        <template v-if="unReadList.length">
          <div
            v-for="item in unReadList"
            :key="item.id"
            class="item"
            @click="handMsgTo(item)"
          >
            <div class="icon-type">{{ item.messageTitle.substr(0, 2) }}</div>
            <div class="info flex-[1]">
              <div class="title">
                {{ item.messageContent }}
              </div>
              <div class="date">
                {{ item.deliverTime }}
              </div>
            </div>
          </div>
          <div class="absolute bottom-[-12px] h-[45px] w-full news-link">
            <el-button link class="w-full mt-[12px]" @click="handLinkTo">进入消息列表</el-button>
          </div>
        </template>
        <div v-else class="list">
          <div class="empty">暂无未读消息</div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane
      :label="`待办 ${
        notifucationStore.todo > 0 ? `(${notifucationStore.todo})` : ''
      }`"
      name="todo"
      class="container"
    >
      <GlBacklogCenter @count-total-page="setTodoCount">
        <div class="list">
          <div class="empty">暂无新待办</div>
        </div>
      </GlBacklogCenter>
    </el-tab-pane>
  </el-tabs>
  <CustomMsgComponent v-else />
</template>

<style lang="scss" scoped>
.notification {
  margin-top: -10px;

  :deep(.el-tabs__header) {
    margin-bottom: 0;
  }

  :deep(.el-tabs__nav-scroll) {
    text-align: center;

    .el-tabs__nav {
      margin: 0 auto;

      .el-tabs__item {
        padding: 0 12px;
      }
    }
  }
}

.container {
  .list {
    max-height: 300px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-bottom: 27px;

    .news-link{
      border-top: 1px solid var(--el-popover-border-color);
      background-color: var(--el-popover-bg-color);
    }

    .icon-type{
      width: 40px;
      height: 40px;
      background: var(--el-color-primary);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      margin-right: 16px;
      color: var(--el-fill-color);
    }

    .item {
      display: flex;
      align-items: flex-start;
      padding: 15px 0;
      transition: 0.3s;
      border-bottom: 1px solid var(--el-border-color);
      // cursor: pointer;

      &:hover {
        background-color: var(--el-fill-color);
      }

      &:last-child {
        border-bottom: unset;
      }

      .el-icon {
        flex: none;
        margin-right: 10px;
        width: 2em;
        height: 2em;
        border-radius: 50%;
        color: #fff;
        background-color: var(--el-color-primary);

        &.service {
          background-color: var(--el-color-success);
        }

        &.file-edit {
          background-color: var(--el-color-warning);
        }

        &.bug {
          background-color: var(--el-color-danger);
        }
      }

      .info {
        .title {
          font-size: 14px;
          line-height: 1.5;

          @include text-overflow(2);
        }

        .date {
          margin-top: 5px;
          font-size: 12px;
          color: var(--el-text-color-secondary);
        }
      }
    }

    .empty {
      padding: 30px 0;
      text-align: center;
      color: var(--el-text-color-placeholder);
    }
  }

  .more {
    padding: 15px 0;
    margin-bottom: -10px;
    text-align: center;
    color: var(--el-text-color-secondary);
    border-top: 1px solid var(--el-border-color);
    cursor: pointer;
  }
}
</style>
